<template>
  <div >
    <a-modal class="common-modal1 loading-diag-container" :centered="true" :footer="null" :visible="visible" :width="420" :maskClosable="false" :closable="false" >
      <div class="p-20 ai-generate-road-loading" > 
        <div class="mb-8 running-roadmap">{{ $t('other.generatingRoadmap') }}...</div>
        <div>
          <a-progress :percent="percent"/>
        </div>
        <div>
          <a-carousel :autoplay="true" :autoplaySpeed="1000" :dots="false" :afterChange="getShowTime" :key="key">
            <div class="remaining-time">{{$t('other.surplus')}} {{ remainTime }}s</div>
            <div class="remaining-time">{{$t('other.acceleratorKey')}}</div>
            <div class="remaining-time">{{ $t('other.jackAiSchedulingToHelpYouSolveSchedulingProblems') }}</div>
            <div class="remaining-time">{{$t('other.lineBalance')}}</div>
          </a-carousel>
        </div>
      </div>
      <div class="generate-road-loading-cancel">
        <a-button @click="handleCancel" class="cancel">{{ $t("common.cancel") }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref } from "vue";
const emits = defineEmits(["ok"]);
let visible = ref(false);
let percent = ref(6);
let remainTime = ref(30);
let autoplay = ref(false);
let key = ref(0);
// onMounted(()=>{
//     open(true)
// })
const open = async (val) => {
  visible.value = val;
  autoplay.value = val;
  percent.value = 6;
  remainTime.value = 30;
};
const getShowTime = (ee) => {
  if (ee == 3) {
    autoplay.value = false;
    setTimeout(() => {
      key.value = Math.random();
      autoplay.value = true;
    }, 1000);
  }
  percent.value = percent.value + 6
  percent.value = percent.value >99?99:percent.value
  remainTime.value = remainTime.value - 2 < 0 ? 1  : remainTime.value - 2
}
const handleCancel = () => {
  emits("ok");
  visible.value = false;
  autoplay.value = false;
  percent.value = 0;
  remainTime.value = 30;
};
defineExpose({
  open,
});
</script>
